import React, { Component } from 'react'
import Qcevents from "../utils/events"
const Style = {
    "marginLeft":"30px"
}
 class Header extends Component {
    state = {
        activeIndex:0
    }

    delfn(ind){
        console.log(ind)
        this.setState({
            activeIndex:ind
        })
        this.props.delFn(ind)

    }
    checkIndex(ind){
        console.log(ind)
        Qcevents.emit("ind",ind) // 兄弟组件传参
        this.setState({
            activeIndex:ind
        })
    }
  render() {
    console.log(this.props.children,123)
    let {send} = this.props
   
    let {activeIndex}  = this.state
    console.log(send,111111)
    return (
      <div className='header_wrap'>

          <div>
            {
                 send&&send.length?send.map((item,index)=>{
                    return <div> { this.props.children()}</div>
                 }):""
            }
             
          </div>
          {
              send&&send.length?send.map((item,index)=>{
                  return <p style={Style} key={index} className={activeIndex == index?"active":""}><span onClick={this.checkIndex.bind(this,index)}>{item.title}</span> <span onClick={this.delfn.bind(this,index)}>X</span></p>
              }):""
          }
      </div>
    )
  }
}

export default Header